<template>
  <div id="app">
    <div id="left" class="container">
      <h1>事件上报</h1>
      <div class="form-item">
        <label class="form-label" for="eventName">事件名称：</label>
        <input
          class="form-input"
          type="text"
          id="eventName"
          v-model="eventName"
        />
      </div>
      <div class="form-item">
        <label class="form-label">上报人：</label>
        <input
          class="form-input"
          type="text"
          v-model="reporterName"
          :disabled="isAnonymous"
        />
        <input
          class="form-input"
          type="checkbox"
          v-model="isAnonymous"
        />匿名上报
      </div>
      <div class="form-item">
        <label class="form-label" for="contact">联系电话：</label>
        <input class="form-input" type="text" id="contact" v-model="contact" />
      </div>
      <div class="form-item datepicker">
        <label class="form-label">上报时间：</label>
        <el-date-picker
          v-model="reportDate"
          type="datetime"
          placeholder="选择日期时间"
          :picker-options="datePickerOptions"
        ></el-date-picker>
      </div>
      <div class="form-item">
        <label class="form-label" for="location">发生地点：</label>
        <input
          class="form-input"
          type="text"
          id="location"
          v-model="location"
        />
      </div>
      <div class="form-item">
        <label class="form-label" for="photo">传送现场照片：</label>
        <input
          class="form-input"
          type="file"
          id="photo"
          multiple
          @change="handlePhotoUpload"
        />
      </div>
      <div class="uploaded-photos-container">
        <div
          class="uploaded-photo"
          v-for="(photo, index) in uploadedPhotos"
          :key="index"
        >
          <img :src="photo.url" alt="现场照片" />
        </div>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">事件描述：</label>
        <textarea
          class="form-input"
          id="description"
          v-model="description"
        ></textarea>
      </div>
      <div class="form-item">
        <label class="form-label" for="eventType">选择事件类型：</label>
        <select class="form-input" id="eventType" v-model="eventType">
          <option value="">请选择</option>
          <option value="1">民事纠纷</option>
          <option value="2">自然灾害</option>
          <option value="3">恶行斗殴</option>
          <option value="4">偷盗事件</option>
          <option value="5">交通事故</option>
          <option value="6">其他</option>
        </select>
      </div>
      <div class="form-item">
        <button class="form-button" @click="submitForm">提交</button>
      </div>
    </div>
    <div id="right">
      <baidu-map
        class="bm-view"
        :center="{ lng: 115.8988, lat: 28.68505 }"
        :zoom="14"
      >
        <bml-curve-line
          :points="path"
          :editing="true"
          @lineupdate="update"
        ></bml-curve-line>
        <!-- <bm-driving start="怀来人工智能产业园" end=" 大南新堡村" @searchcomplete="handleSearchComplete" :panel="false" :autoViewport="true"></bm-driving> -->
        <bml-lushu
          @stop="reset"
          :path="path"
          :icon="icon"
          :speed="1000"
          :autoView="false"
          :rotation="true"
          :landmarkPois="landmarkPois"
          :infoWindow="true"
          content="事故现场"
        >
        </bml-lushu>
        <div v-for="(item, index) in listDa" :key="index">
          <bm-marker
            :position="{ lng: item.lei, lat: item.lat }"
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
          >
            <bm-label
              :content="item.title"
              :labelStyle="{ color: 'green', fontSize: '16px' }"
              :offset="{ width: -35, height: 30 }"
              @click="infoWindowOpen"
            />
            <!-- 弹出框 -->
            <bm-info-window
              :show="show"
              @close="infoWindowClose"
              @open="infoWindowOpen"
              :title="item.title"
            >
              <p v-text="item.cont"></p>
            </bm-info-window>
          </bm-marker>
        </div>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { BmlLushu } from "vue-baidu-map";
import { BmMarker } from "vue-baidu-map";
import { BmlCurveLine } from "vue-baidu-map";
export default {
  name: "Shangbao",
  components: {
    BmlLushu,
    BmMarker,
    BmlCurveLine,
  },
  data() {
    return {
      show: true,
      path: [{ lng: 115.8988, lat: 28.68505 }],
      icon: {
        url: require("@/assets/images/事故现场.png"),
        size: { width: 289, height: 191 },
        opts: { anchor: { width: 289, height: 191 } },
      },
      listDa: [
        {
          title: "东湖人工智能产业园",
          lei: 115.8988,
          lat: 28.68505,
          cont: "早上8:05 两车相撞",
        },
      ],
      landmarkPois: [
        {
          lng: 115.8988,
          lat: 28.68505,
          html: "8:05从怀来人工智能产业轩出发",
          pauseTime: 3,
        },
      ],
      eventName: "",
      reporterName: "",
      isAnonymous: false,
      contact: "",
      reportDate: "",
      location: "",
      uploadedPhotos: [],
      description: "",
      eventType: "",
      reportDate: "", // 上报时间字段
      datePickerOptions: {
        // 配置日期选择器的选项
        // 例如：可设置可选的日期范围、日期格式等
      },
    };
  },
  filters: {},
  components: {},
  mounted() {},
  methods: {
    reset() {
      this.play = false;
    },
    openDatePicker() {
      // 打开日期选择器逻辑
    },
    submitForm() {
      // 提交表单逻辑
    },
    submitForm() {
      this.$refs.eventForm.validate((valid) => {
        if (valid) {
          // 在这里执行提交表单的操作
          console.log(this.eventData);
        }
      });
    },
    resetForm() {
      this.$refs.eventForm.resetFields();
    },
    handlePhotoUpload(event) {
      // 处理照片上传逻辑
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = (e) => {
          const url = e.target.result;
          this.uploadedPhotos.push({ url });
        };
        reader.readAsDataURL(file);
      }
    },
    handleUploadSuccess(response, file, fileList) {
      // 处理文件上传成功的操作
    },
    handleUploadRemove(file, fileList) {
      // 处理文件移除的操作
    },
  },
};
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
  margin-top: 0px;
}
#app {
  display: flex;
  width: 100%;
  height: 100%;
}
#left {
  left: 0px;
  flex: 45%;
  height: 100%;
  background: url("@/assets/images/guideBg.jpg");
  background-size: 110% 110%;
}
#right {
  flex: 55%;
  height: 100%;
}
/* 页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 表单样式 */
.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-input[type="checkbox"] {
  width: auto;
}

.form-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

/* 日期选择器样式 */
.datepicker {
  position: relative;
}

.datepicker input {
  padding-right: 30px;
}

.datepicker .calendar-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

/* 图片上传样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.upload-item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-item img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.uploaded-photos-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.uploaded-photo {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.uploaded-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
